import { Table, Button, Tag, message, notification } from "antd";
import axios from "axios";
import React, { useEffect, useState } from "react";
import { useNavigate } from "react-router";

export default function AuditList() {
  const [dataSource, setdataSource] = useState([]);
  const { username } = JSON.parse(localStorage.getItem("token"));
  useEffect(() => {
    // 这里请求的是作者是当前用户的，auditSatat!==0的，也就是新闻处于待审核，以通过，未通过，publishState<=2的，也就是未发布和待发布的，并且在新闻分类里请求

    // _ne是不等于 _lt是小于 _gt是大于 _lte是小于等于 json-server特有的写法

    // axios 默认是get请求
    axios(
      `/news?author=${username}&auditState_ne=0&publishState_lte=1&_expand=category`
    ).then((res) => {
      const list = res.data;
      list.forEach((item) => {
        if (item.label) {
          item.title = item.label;
        }
      });
      // console.log(list)
      console.log(res.data);
      setdataSource(list);
    });
  }, [username]);
  // 表单的撤销事件
  const handleRervert = (row) => {
    // 先将页面的数据将之前的dataSource里的值进行一个过滤，把不等于的id排除掉
    setdataSource(dataSource.filter((item) => item.id !== row.id));
    // 再向服务器发送请，求进行修改操作，将这个auditState=0就是未发布状态
    axios.patch(`/news/${row.id}`, { auditState: 0 }).then(() => {
      notification.info({
        message: "通知",
        description: "您可以到草稿箱中查看您的新闻",
        placement: "bottomRight",
      });
    });
  };
  // 修改事件
  const navigator = useNavigate();
  // 修改新闻按钮事件
  const handleUpdate = (row) => {
    navigator(`/news-manage/update/${row.id}`);
  };
  // 发布按钮事件
  const handlePublish = (row) => {
    // 将这个publishState改为2就是发布状态
    row.publishState = 2;
    setdataSource([...dataSource]);
    axios
      .patch(`/news/${row.id}`, {
        publishState: 2,
        publishTime: Date.now(), //发布时间
      })
      .then(() => {
        navigator("/publish-manage/published");
        notification.info({
          message: "通知",
          description: "您可以去【发布管理/已发布】中查看",
          placement: "bottomRight",
        });
      });
  };
  // 表格头设置
  const columns = [
    {
      title: "新闻标题",
      dataIndex: "title",
      render: (title, item) => (
        // 跳转到预览新闻预览
        <a href={`/news-manage/preview/${item.id}`}>{title}</a>
      ),
    },
    {
      title: "作者",
      dataIndex: "author",
    },
    {
      title: "新闻分类",
      dataIndex: "category",
      render: (category) => <div color="orange">{category.label}</div>,
    },
    {
      title: "审核状态",
      dataIndex: "auditState",
      render: (auditState) => {
        const colorList = ["", "orange", "green", "red"]; //颜色
        const auditList = ["草稿箱", "审核中", "已通过", "未通过"]; //新闻的状态
        return <Tag color={colorList[auditState]}>{auditList[auditState]}</Tag>;
      },
    },
    {
      title: "操作",
      render: (row) => {
        return (
          <div>
            {row.auditState === 1 && (
              <Button onClick={() => handleRervert(row)}>撤销</Button>
            )}
            {row.auditState === 2 && (
              <Button danger onClick={() => handlePublish(row)}>
                发布
              </Button>
            )}
            {row.auditState === 3 && (
              <Button type="primary" onClick={() => handleUpdate(row)}>
                修改
              </Button>
            )}
          </div>
        );
      },
    },
  ];
  return (
    <div>
      <Table
        dataSource={dataSource}
        columns={columns}
        pagination={{ pageSize: 5 }}
        rowKey={(item) => item.id}
      ></Table>
    </div>
  );
}
